<template>
	<view>
		<!-- tabbar组件 -->
		<Tabbar :pageIndex="1"></Tabbar>
		<view class="container">
			<!-- 第一个图片 -->
			<view class="image-container left">
				<image src="/static/index/dingwei.png" class="image"></image>
			</view>
			<!-- 选择城市，定位城市 -->
			<view class="city">
				<view :style="{height: statusBarHeight + 'px'}" style="width: 100%;"></view>
				<view style="line-height: 40px; margin-top: -40px;" @click="oncity">
					{{region}}
				</view>
				<popup-layer ref="popupRef" :direction="'right'">
					<view style="width: 750upx; height: 100%;">
						<citySelect @back_city="back_city"></citySelect>
					</view>
				</popup-layer>
			</view>
			<!-- 第二个图片 -->
			<view class="image-container right">
				<image src="/static/index/shuaxin.png" class="image"></image>
			</view>
		</view>
		<!-- 四个图标 -->
		<view class="service-container">
			<view v-for="(item,index) in typeList" :key="item.id">
				<view class="service-card" @click="optionType(item)">
					<image :src="item.icon" class="service-image"></image>
				</view>
				<text class="service-text">{{item.name}}</text>
			</view>

			<!--  <view>
			<view class="service-card" @click="upkeep">
			<image src="/static/index/car.png" class="service-image"></image>
			</view>
			<text class="service-text">汽车保养</text>
			</view>
			<view>
			<view class="service-card" @click="carWash">
			<image src="/static/index/car.png" class="service-image"></image>
			</view>
			<text class="service-text">专业洗车</text>
			</view>
			<view>
			<view class="service-card" @click="oiling">
			<image src="/static/index/car.png" class="service-image"></image>
			</view>
			<text class="service-text">就近加油</text>
			</view> -->

		</view>

		<!-- 附近加油站 -->
		<view class="map">
			<view class="header">
				<text class="title">附近加油站</text>
				<text class="more" @click="all">全部 ></text>
			</view>
			<view class="page-body">
				<view class="page-section page-section-gap">
					<map style="width: 100%; height: 200px" :latitude="latitude" :longitude="longitude"
						:markers="covers"></map>
				</view>
			</view>
		</view>

		<!-- 优惠团购 -->
		<view class="tuangou">
			<view class="tuangouHeader">
				<text class="tuangouTitle">优惠团购</text>
				<text class="tuangouMore" @click="more">更多 ></text>
			</view>
			<view class="card-container">
				<view class="card" v-for="(item,index) in dynamicList" :key="item.id" @click="gotoDetail(item)">
					<image :src="item.img" class="card-image"></image>
					<text class="card-text">{{item.title}}</text>
				</view>
			</view>
		</view>
	</view>
</template>



<script>
	import citySelect from '@/components/linzq-citySelect/linzq-citySelect.vue';
	import popupLayer from '@/components/popup-layer/popup-layer.vue';
	import Tabbar from '@/components/tabbar/tabbar.vue';
	export default {
		components: {
			citySelect,
			popupLayer,
			Tabbar,
		},

		data() {
			return {
				longitude: '',
				latitude: '',
				statusBarHeight: 0, // 状态栏高度
				region: '选择城市', // 地区
				dynamicList: [],
				covers: [], // 或其他适当的初始值
				typeList: [], // 服务类型
				covers: [{
							latitude: 39.909,
							longitude: 116.39742,
							iconPath: '/static/index/jiayouzhan.png',
							width: 30,
							height: 30,
							title: '北京金源加油站',
							address: '北京市海淀区金源路',
							tel: '010-82668888',

							callout: {
								content: '北京金源加油站',
								color: '#000000',
								fontSize: 14,
								display: 'ALWAYS',
								borderRadius: 5,
								bgColor: '#ffffff',
								padding: 5,
							},

						},
						{
							latitude: 39.909,
							longitude: 116.39742,
							iconPath: '/static/index/jiayouzhan.png',
							width: 30,
							height: 30,
							title: '北京金源加油站',
							address: '北京市海淀区金源路',
							tel: '010-82668888',

							callout: {
								content: '北京金源加油站',
								color: '#000000',
								fontSize: 14,
								display: 'ALWAYS',
								borderRadius: 5,
								bgColor: '#ffffff',
								padding: 5,
							},
						}
					]
			}

		},

		mounted() {
			this.$refs.popupRef.close();
			this.show();
			this.getServiceType();
			this.getHotGroup();
		},

		methods: {
			// 获取服务类型
			getServiceType() {
				console.log("获取服务类型");
				// 获取token
				var token = uni.getStorageSync('Token');
				uni.request({
					url: `http://localhost:7001/ruoyi-merchant/type/list`,
					method: 'GET',
					header: {
						'Authorization': 'Bearer ' + token
					},
					success: (res) => {
						if (res.statusCode === 200) {
							// console.log("res...............................");
							console.log(res);
							this.typeList = res.data.rows
						} else {
							reject(`Failed to fetch details. Status code: ${res.statusCode}`);
						}
					},
					fail: (err) => {
						reject(`Request failed: ${err.errMsg}`);
					}
				});
			},
			optionType(item) {
				var URL = item.url
				uni.navigateTo({
					url: URL + '?id=' + item.id
				})
			},
			show() {
				uni.showToast({
					title: '登录成功',
					icon: 'success', // 设置图标为无图标
					duration: 1000, // 显示时长（毫秒）
					success: () => {
						console.log('弹窗显示成功');
					},
					fail: (err) => {
						console.error('弹窗显示失败', err);
					}
				});
			},

			oncity() {
				this.$refs.popupRef.show();
			},

			back_city(e) {
				if (e !== 'no') {
					this.region = e.cityName
					this.$refs.popupRef.close();
				} else {
					this.$refs.popupRef.close();
				}
			},
			//车辆维修
			maintenance() {
				uni.navigateTo({
					url: '/pages/index/repair/repair'
				})
			},
			//汽车保养
			upkeep() {
				uni.navigateTo({
					url: '/pages/index/maintain/maintain'
				})
			},
			//专业洗车
			carWash() {
				uni.navigateTo({
					url: '/pages/index/carWash/washcar'
				})
			},
			//就近加油
			oiling() {
				uni.navigateTo({
					url: '/pages/index/cheer/cheer'
				})
			},

			// //车辆维修
			// maintenance(){
			//  uni.navigateTo({
			//  url: '/pages/index/repair/repair'
			//  })
			// },

			// //汽车保养
			// upkeep(){
			//  uni.navigateTo({
			//  url: '/pages/index/maintain/maintain'
			//  })
			// },

			// //专业洗车
			// carWash(){
			//  uni.navigateTo({
			//  url: '/pages/index/carWash/washcar'
			//  })
			// },
			// //就近加油
			// oiling(){
			//  uni.navigateTo({
			//  url: '/pages/index/cheer/cheer'
			//  })
			// },

			//附近加油站 全部
			all() {
				uni.navigateTo({
					url: '/pages/index/cheer/cheermap'
				})
			},

			//优惠团购
			more() {
				uni.navigateTo({
					url: '/pages/index/groupBuy/groupBuy'
				})
			},

			// 获取热门团购信息
			getHotGroup() {
				const token = uni.getStorageSync('Token')
				uni.request({
					url: `http://localhost/dev-api/system/buying/hotList`,
					method: 'GET',
					header: {
						'Authorization': 'Bearer ' + token,
					},
					success: (res) => {
						if (res.statusCode === 200) {
							this.dynamicList = res.data.rows.slice(0, 4);
							// console.log("res...............................");
							// console.log("this.dynamicList",this.dynamicList);
						} else {
							console.log("请求失败");

						}
					},
					fail: (err) => {
						console.log("请求失败");
					},
				});
			},	
			
			// 跳转到团购详情页
			gotoDetail(item) {
				console.log("item",item);
				uni.navigateTo({
					url: '/pages/index/groupBuy/buyDetail?id=' + item.id,	
				})	
			},
		}
	}
</script>

<style scoped lang="scss">
	page {
		background-color: #fff;
	}

	.container {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		padding-top: 5px;
		/* 上方 padding */
		box-sizing: border-box;
		/* 确保 padding 包含在宽度计算中 */
	}

	.image-container {
		flex: 1;
		display: flex;
		justify-content: center;
	}

	.image {
		width: 15px;
		/* 根据实际需要调整大小 */
		height: 15px;
		/* 根据实际需要调整大小 */
	}

	.left {
		margin-top: -60px;
	}

	.right {
		margin-top: -60px;
	}

	.city {
		margin-top: -20px;
		flex: 2;
		text-align: left;
		/* 中间区域靠近左边 */
	}

	//四个卡片
	.service-container {
		margin-left: 10px;
		margin-right: 10px;
		display: flex;
		justify-content: space-between;
		flex-wrap: nowrap;
		/* 确保所有卡片在同一行 */
		padding: 0 15px;
	}

	.service-card {
		background: #fff;
		border-radius: 20px;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
		width: 50px;
		height: 50px;
		/* 根据需要调整宽度 */
		padding: 5px;
		text-align: center;
	}

	.service-image {
		width: 30px;
		height: 30px;
		margin-top: 10px;
		border-radius: 10px;
	}

	.service-text {
		display: block;
		margin-top: 10px;
		/* 增加与图片的间距 */
		color: #333;
	}

	//附近加油站
	.map {
		padding: 10px;
	}

	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10px;
	}

	.title {
		font-weight: bold;
	}

	.more {
		color: blue;
	}

	.image-container {
		width: 100%;
	}

	.full-image {
		weight: 100%;
		height: 150px;
	}

	//团购
	.tuangou {
		padding: 10px;
		padding-bottom: 70px;
	}

	.tuangouHeader {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10px;
	}

	.tuangouTitle {
		font-weight: bold;
		font-size: 15px;
	}

	.tuangouMore {
		// color: blue;
	}

	.card-container {
		display: flex;
		/* 使用flex布局 */
		flex-wrap: wrap;
		/* 允许子元素换行 */
		/* 不允许换行 */
		// flex-wrap: nowrap;
	    justify-content: space-between; /* 在主轴上两端对齐项目 */
	    padding: 0 5px;          /* 可选：为.card-container添加内边距 */
		font-size: 14px;
	}

	.card {
		margin-right: 5px;
		background: #fff;
		border-radius: 10px;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
		width: 48%;
		/* Adjust width as needed */
		height: 150px;
		text-align: center;
		margin-right: 5px;
		/* 设置右边距 */
		margin-bottom: 10px;
		/* 设置底部边距，为卡片之间提供间隔 */
		background: #fff;
		border-radius: 10px;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
		width: calc(49% - 5px);
		/* 设置宽度为50%，减去右边距 */
		height: 150px;
		/* 设置高度 */
		text-align: center;
	}
	
	.card-image {
		width: 100%;
		height: 100px;
		border-top-left-radius: 10px;
		/* 可选：设置图片的圆角 */
		border-top-right-radius: 10px;
		/* 可选：设置图片的圆角 */
	}

	.card-text {
		margin-top: 10px;
		color: #333;
	}
</style>